<template>
  <div class="customer-info-container">
    <ai-main>
      <ai-panel>
        <span slot="title">顾客信息</span>
        <div slot="content" class="content">
          <el-row :gutter="20" class="info">
            <el-col :span="4" class="avatar">
              <img :src="customerMainInfo.customer_avatar" alt="avatar" class="avatar-img">
            </el-col>
            <el-col :span="20" class="details">
              <div class="col">
                <span class="label">UserId: </span>
                <span class="value">{{ customerMainInfo.customer_id || '-' }}</span>
              </div>
              <div class="col">
                <span class="label">性别: </span>
                <span class="value">{{ customerMainInfo.customer_gender ? (customerMainInfo.customer_gender === 1 ? '男' : '女') : '-' }}</span>
              </div>
              <div class="col">
                <span class="label">年龄: </span>
                <span class="value">{{ customerMainInfo.customer_age ? customerMainInfo.customer_age + '岁' : '-' }}</span>
              </div>
              <div class="col">
                <span class="label">首次到店时间: </span>
                <span class="value">{{ customerOtherInfo.first_entry_at || '-' }}</span>
              </div>
              <div class="col">
                <span class="label">来店次数: </span>
                <span class="value">{{ customerOtherInfo.entry_num ? customerOtherInfo.entry_num + '次' : '-' }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </ai-panel>
      <ai-panel>
        <span slot="title">历史来店信息</span>
        <div slot="content" class="content">
          <el-table :data="customerHistoryList"
                    v-if="customerHistoryList"
                    empty-text="暂无数据"
                    :cell-style="addStyle"
                    style="width: 100%">
            <el-table-column prop="entry_at"
                              label="入店时间"
                              align="left"
                              width="180">
            </el-table-column>
            <el-table-column label="停留时长"
                              align="left"
                              width="120">
              <template slot-scope="scope">{{ scope.row.seconds | second2format }}</template>
            </el-table-column>
            <el-table-column label="是否成交"
                              align="left"
                              width="100">
              <template slot-scope="scope">
                <span class="{ success-text: scope.row.is_dealed }">{{ scope.row.is_dealed ? '成交' : '未成交' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="同行人"
                              align="center"
                              width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.strokes && scope.row.strokes.length">
                  <span v-for="(item, index) in scope.row.strokes" :key="index">
                    <span class="id" @click="navToCustomerInfo(item.to_cid, item.to_line_id )" style="color: #006EFF;cursor: pointer;">{{ item.to_cid }}</span><br>
                  </span>
                </span>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column label="接待导购"
                             width="200"
                             align="left">
              <template slot-scope="scope">
                <span v-if="scope.row._receptions.saleman">
                  <span class="id"
                        @click="navToGuideInfo(scope.row._receptions.saleman_id, scope.row.stats_date)"
                        style="color:#006EFF;cursor: pointer;">
                    {{ scope.row._receptions.saleman.name }}({{scope.row._receptions.seconds | second2format }})
                  </span><br>
                </span>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column label="动线过程"
                             class="moveline"
                             align="left">
              <template slot-scope="scope">
                <span v-for="(item, index) in scope.row.footprints" :key="index">
                  <span v-show="index !== 0"> - </span>
                  <span>{{ areadata[item.zone_id]['name'] }}</span>
                  <span style="color: #999; font-size: 12px;" v-if="item.seconds">({{ item.seconds | second2format }})</span>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="customerHistoryListTotal"
            style="text-align:right">
          </el-pagination>
        </div>
      </ai-panel>
    </ai-main>
  </div>
</template>

<script>
import Main from '@/components/main'
import Panel from '@/components/panel'
import { Row, Col, Table, TableColumn, Pagination } from 'element-ui'
import { APIGetUserInfoById, APIGetUserHistoryRecById } from '@/api/customer'
import { mapGetters } from 'vuex'

export default {
  name: 'customer-info-container',
  components: {
    elRow: Row,
    elCol: Col,
    elPagination: Pagination,
    aiMain: Main,
    aiPanel: Panel,
    elTable: Table,
    elTableColumn: TableColumn
  },
  created () {
    this.APIGetUserInfoById(this.$route.query.customerId, this.$route.query.lineId)
    this.APIGetUserHistoryRecById(this.$route.query.customerId)
  },
  data () {
    return {
      customerMainInfo: {},
      customerOtherInfo: {},
      customerHistoryList: [],
      currPage: 1,
      customerHistoryListTotal: 0
    }
  },
  filters: {
    second2format (second) {
      if (!second) return '0秒'
      const hours = Math.floor(second / (60 * 60)) ? `${Math.floor(second / (60 * 60))}时` : ''
      const mins = Math.floor(second % (60 * 60) / 60) ? `${Math.floor(second % (60 * 60) / 60)}分` : ''
      const seconds = second % (60 * 60) % 60 ? `${second % (60 * 60) % 60}秒` : ''
      return hours + mins + seconds
    }
  },
  computed: {
    ...mapGetters([
      'mallMapData'
    ]),
    areadata () {
      let areadata = {}
      this.mallMapData.forEach(item => { areadata[item.id] = item })
      return areadata
    }
  },
  watch: {
    $route () {
      this.APIGetUserInfoById(this.$route.query.customerId, this.$route.query.lineId)
      this.APIGetUserHistoryRecById(this.$route.query.customerId)
    }
  },
  methods: {
    handleCurrentChange (page) {
      this.APIGetUserHistoryRecById(this.$route.query.customerId, page)
    },
    navToCustomerInfo (customerId, lineId) {
      this.$router.push({
        name: 'customerInfo',
        query: {
          customerId,
          lineId
        }
      })
      this.APIGetUserInfoById(customerId, lineId)
      this.APIGetUserHistoryRecById(customerId)
    },
    navToGuideInfo (id, date) {
      this.$router.push({
        name: 'receptdetail',
        query: {
          id,
          date
        }
      })
    },
    APIGetUserInfoById (customerId, lineId) {
      APIGetUserInfoById({ shop: this.$store.getters.mallId, customer: customerId, lineId: lineId })
        .then((res) => {
          this.customerMainInfo = res.data.line
          this.customerOtherInfo = res.data.shopCustomer
        })
    },
    APIGetUserHistoryRecById (customerId, page) {
      APIGetUserHistoryRecById({ shop: this.$store.getters.mallId, customer: customerId, page })
        .then((res) => {
          this.customerHistoryList = res.data.data
          this.customerHistoryListTotal = res.data.total
          // reception中选出时间最长的导购
          let oneReception = res.data.data.map(item => item.receptions)
          oneReception.forEach((item, index) => {
            if (item.length > 0) {
              let secondsArray = item.map(item => item.seconds)
              let maxSecondsIndex = secondsArray.indexOf(Math.max.apply(null, secondsArray))
              this.customerHistoryList[index]._receptions = item[maxSecondsIndex]
            } else {
              this.customerHistoryList[index]._receptions = ''
            }
          })
        })
    },
    // 表格单元格加样式
    addStyle ({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 3) {
        return { 'text-align': 'center' }
      }
      if (columnIndex === 2 && row.is_dealed === 1) {
        return { 'color': '#0abf5b' }
      }
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.customer-info-container {
  .info {
    .avatar-img {
      width: 150px;
      height: 150px;
    }
    .details {
      height: 150px;
      overflow-y: hidden;
      .col {
        line-height: 30px;
        font-size: 12px;
        .label {
          color: #888;
        }
        .value {
          margin-left: 12px;
        }
      }
    }
  }
}
</style>
